import axios from "axios";
import store from "@/store";
import { Toast } from "vant";
import router from "@/router";
const request = axios.create(
    { baseURL: 'http://toutiao.itheima.net/' }
)
// // 添加请求拦截器
request.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    const user = store.state.user
    if (user && user.token && !config.headers.Authorization) {
        config.headers.Authorization = `Bearer ${store.state.user.token}`
    }
    // console.log(config);
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
request.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么

    return response.data || response;
},
    async function (error) {
        if (error.response) {
            if (error.response.status === 401) {
                const user = store.state.user
                if (user && user.refresh_token) {
                    try {
                        const res = await request({
                            method: 'PUT',
                            url: '/v1_0/authorizations',
                            headers: {
                                Authorization: `Bearer ${user.refresh_token}`
                            }
                        })
                        store.commit('setUser', {
                            token: res.data.token,
                            refresh_token: user.refresh_token
                        })
                        error.config.headers.Authorization = ''
                        return request(error.config)
                    } catch (err) {
                        store.commit('setUser', null)
                        router.push('/login')
                    }
                } else {
                    store.commit('setUser', null)
                    router.push('/login')
                }
            }
            Toast.fail(error.response.data.message)
        } else {
            Toast.fail('网络错误')
        }
        // 超出 2xx 范围的状态码都会触发该函数。
        // 对响应错误做点什么
        return Promise.reject(error);
    });
export default request




// import axios from 'axios'
// import { Toast } from 'vant'
// import store from '@/store'
// import router from '@/router'

// // 创建一个新的axios的实例对象
// const request = axios.create({
//     baseURL: 'http://toutiao.itheima.net'
// })

// // 添加请求拦截器
// // 语法：request.interceptors.request.use(回调函数1, 回调函数2)
// // 关键点：
// //      1. 执行时机：axios调用之后，浏览器发送真正的网络请求之前
// //                  回调函数1：发请求之前如果没有错误，就调回调函数1
// //                  回调函数2: 发请求之前如果有错误，就调回调函数2  （基本上用不到）
// //      2. 第一个回调函数的config就是使用request调接口时传入的配置对象
// //         只是axios中间会做一些处理, 添加了一些额外的属性, 比如headers
// //      3. 回调函数返回什么, axios就使用什么调接口
// request.interceptors.request.use(function (config) {
//     // 1. 判断当前vuex中有没有token
//     const user = store.state.user
//     // 如果已经携带了Authorization的请求头，就不需要被覆盖了
//     if (user && user.token && !config.headers.Authorization) {
//         // 3. 如果有就给 config.headers  也就是请求头的配置项
//         //    加上Authorization
//         config.headers.Authorization = `Bearer ${store.state.user.token}`
//     }
//     // 2. 如果没有啥事不干
//     return config
// }, function (error) {
//     // 对请求错误做些什么
//     return Promise.reject(error)
// })

// // 添加响应拦截器
// // 语法： request.interceptors.response.use(回调函数1, 回调函数2)
// // 关键点：
// //      1. 两个回调函数的执行时机
// //         回调函数1：响应状态码为2开头 时执行
// //         回调演示2：响应状态码为非2开头 或 网络异常 时执行
// //      2. 两个回调函数返回的是什么，
// //         axios的调用拿到的就是什么
// request.interceptors.response.use(function (response) {
//     // 响应状态码为2开头 时执行
//     // 拿到大的响应对象之后，取出其中响应体的部分，返回给调用方
//     return response.data || response
// }, async function (error) {
//     // 响应状态码为非2开头 或 网络异常 时执行
//     if (error.response) {
//         // 判断响应状态码是不是401，如果是401, 就代表token过期了，就要进行token过期处理
//         if (error.response.status === 401) {
//             // 1. 判断vuex中有没有refresh_token, 如果没有就清空token，并跳转到登录页
//             const user = store.state.user
//             if (user && user.refresh_token) {
//                 // 2. 如果有refresh_token, 就要使用refresh_token调刷新token的接口，获取最新的token
//                 try {
//                     const res = await request({
//                         method: 'PUT',
//                         url: '/v1_0/authorizations',
//                         headers: {
//                             Authorization: `Bearer ${user.refresh_token}`
//                         }
//                     })
//                     // 2.1. 如果调刷新token的接口成功了，就拿最新的token, 更新替换过期的token
//                     store.commit('setUser', {
//                         token: res.data.token,
//                         refresh_token: user.refresh_token
//                     })
//                     // 2.2. 拿着原来调接口的信息，重新调接口，拿到数据返回给原调用方
//                     error.config.headers.Authorization = ''
//                     return request(error.config)
//                 } catch (err) {
//                     // 3. 如果调刷新token的接口失败就说明refresh_token过期，就清空token，并跳转到登录页
//                     // 清空token & 跳转到登录页
//                     store.commit('setUser', null)
//                     router.push('/login')
//                 }
//             } else {
//                 // 清空token & 跳转到登录页
//                 store.commit('setUser', null)
//                 router.push('/login')
//             }
//             // // 2. 清空token
//             // store.commit('setUser', null)
//             // // 3. 跳转到登录页
//             // router.push('/login')
//         }
//         Toast.fail(error.response.data.message)
//     } else {
//         Toast.fail('网络错误')
//     }
//     return Promise.reject(error)
// })

// // 默认导出
// export default request